import React, { Component } from 'react';
import './index.css';

class TypeTab extends Component {
  constructor(props) {
    super(props)
    this.state = {
      typeList: ['全部', '红棉系列', '常春藤系列', '测试系列', '测试系列1', '测试系列2'],
      typeId: '全部'
    }

    this.setType = this.setType.bind(this)
  }

  setType (e) {
    document.body.scrollTop = 0
    if (!e._targetInst._currentElement.key) { return }
    this.setState({
      typeId: e._targetInst._currentElement.key
    })
  }

  render() {
    return (
      <div className="typeTab">
        <i className="iconfont icon-left"></i>
        <ul className="typeTab-list" onClick={this.setType}>
          {this.state.typeList.map(v => 
            <li className={this.state.typeId === v ? 'active' : ''} key={v}>{v}</li>
          )}
        </ul>
        <i className="iconfont icon-right"></i>
      </div>
    )
  }
}

export default TypeTab;